/**
 * Created by willem
 */
import './index.scss';
import { PureComponent } from 'react';
// import WebTorrent from 'webtorrent';
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import T from 'utils/T';

import Draggable from 'react-draggable'; // The default
export default class Components extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            activeDrags: 0,
            deltaPosition: {
                x: 0, y: 0
            },
            controlledPosition: {
                x: -400, y: 200
            }
        };
    }

    handleDrag = (e, ui) => {
        const { x, y } = this.state.deltaPosition;
        this.setState({
            deltaPosition: {
                x: x + ui.deltaX,
                y: y + ui.deltaY,
            }
        });
    }

    onStart=() => {
        this.setState({ activeDrags: ++this.state.activeDrags });
    }

    onStop=() => {
        this.setState({ activeDrags: --this.state.activeDrags });
    }

    // For controlled component
    adjustXPos=(e) => {
        e.preventDefault();
        e.stopPropagation();
        const { x, y } = this.state.controlledPosition;
        this.setState({ controlledPosition: { x: x - 10, y }});
    }

    adjustYPos=(e) => {
        e.preventDefault();
        e.stopPropagation();
        const { controlledPosition } = this.state;
        const { x, y } = controlledPosition;
        this.setState({ controlledPosition: { x, y: y - 10 }});
    }

    onControlledDrag=(e, position) => {
        const { x, y } = position;
        this.setState({ controlledPosition: { x, y }});
    }

    onControlledDragStop=(e, position) => {
        this.onControlledDrag(e, position);
        this.onStop();
    }

    render() {
        const dragHandlers = { onStart: this.onStart, onStop: this.onStop };
        const { deltaPosition, controlledPosition } = this.state;
        return (
            <div>
                <h1>React Draggable</h1>
                <p>Active DragHandlers: {this.state.activeDrags}</p>
                <p>
                    <a href="https://github.com/mzabriskie/react-draggable/blob/master/example/index.html">Demo Source</a>
                </p>
                <Draggable {...dragHandlers}>
                    <div className="box">任意拖拽</div>
                </Draggable>
                <Draggable axis="x" {...dragHandlers}>
                    <div className="box cursor-x">x轴拖拽</div>
                </Draggable>
                <Draggable axis="y" {...dragHandlers}>
                    <div className="box cursor-y">y轴拖拽</div>
                </Draggable>
                <Draggable onStart={() => false}>
                    <div className="box">不能拖拽</div>
                </Draggable>
                <Draggable onDrag={this.handleDrag} {...dragHandlers}>
                    <div className="box">
                        <div>位置详情</div>
                        <div>x: {deltaPosition.x.toFixed(0)}, y: {deltaPosition.y.toFixed(0)}</div>
                    </div>
                </Draggable>
                <Draggable handle="strong" {...dragHandlers}>
                    <div className="box no-cursor">
                        <strong className="cursor"><div>点此拖拽</div></strong>
                        <div>变成小手后拖拽</div>
                    </div>
                </Draggable>
                <Draggable cancel="strong" {...dragHandlers}>
                    <div className="box">
                        <strong className="no-cursor">不能拖拽这</strong>
                        <div>空白处拖拽</div>
                    </div>
                </Draggable>
                <Draggable grid={[25, 25]} {...dragHandlers}>
                    <div className="box">25 x 25网格移动</div>
                </Draggable>
                <Draggable grid={[50, 50]} {...dragHandlers}>
                    <div className="box">50 x 50网格移动</div>
                </Draggable>
                <Draggable bounds={{ top: -100, left: -100, right: 100, bottom: 100 }} {...dragHandlers}>
                    <div className="box">100范围内移动</div>
                </Draggable>
                <div className="box" style={{ height: '500px', width: '500px', position: 'relative', overflow: 'auto', padding: '0' }}>
                    <div style={{ height: '1000px', width: '1000px', padding: '10px' }}>
                        <Draggable bounds="parent" {...dragHandlers}>
                            <div className="box">
                                不能移出父级元素<br /><br />
                                父填充和子空白都能正常工作。
                            </div>
                        </Draggable>
                        <Draggable bounds="parent" {...dragHandlers}>
                            <div className="box">
                                只能在我父母的范围内移动<br /><br />
                                父填充和子空白都能正常工作。
                            </div>
                        </Draggable>
                    </div>
                </div>
                <Draggable bounds="body" {...dragHandlers}>
                    <div className="box">
                        只能在body元素的范围内移动
                    </div>
                </Draggable>
                <Draggable>
                    <div className="box" style={{ position: 'absolute', bottom: '100px', right: '100px' }} {...dragHandlers}>
                        已经有了一个绝对的位置。
                    </div>
                </Draggable>
                <Draggable defaultPosition={{ x: 25, y: 25 }} {...dragHandlers}>
                    <div className="box">
                        {"有一个默认的位置是{x: 25, y: 25}，所以有点偏移。"}
                    </div>
                </Draggable>
                <Draggable position={controlledPosition} {...dragHandlers} onDrag={this.onControlledDrag}>
                    <div className="box">
                        位置可以通过程序改变 <br />
                        有一个拖动处理程序来同步状态。
                        <p>
                            <a href="#" onClick={this.adjustXPos}>Adjust x ({controlledPosition.x})</a>
                        </p>
                        <p>
                            <a href="#" onClick={this.adjustYPos}>Adjust y ({controlledPosition.y})</a>
                        </p>
                    </div>
                </Draggable>
                <Draggable position={controlledPosition} {...dragHandlers} onStop={this.onControlledDragStop}>
                    <div className="box">
                        位置可以通过程序改变 <br />
                        有一个拖动处理程序来同步状态。
                        <p>
                            <a href="#" onClick={this.adjustXPos}>Adjust x ({controlledPosition.x})</a>
                        </p>
                        <p>
                            <a href="#" onClick={this.adjustYPos}>Adjust y ({controlledPosition.y})</a>
                        </p>
                    </div>
                </Draggable>

            </div>
        );
    }
}

